<template>
  <div class="field-management-container">
    <!-- 顶部标签栏 -->
    <div class="tabs-header">
      <el-tabs v-model="activeTab">
        <el-tab-pane label="数据管理" name="data"></el-tab-pane>
        <el-tab-pane label="字段管理" name="field"></el-tab-pane>
        <el-tab-pane label="数据质量" name="quality"></el-tab-pane>
        <el-tab-pane label="数据服务" name="service"></el-tab-pane>
      </el-tabs>
    </div>

    <!-- 搜索和操作区域 -->
    <div class="search-operation-bar">
      <el-input
        v-model="searchKeyword"
        placeholder="搜索字段名称、别名或描述"
        prefix-icon="el-icon-search"
        class="search-input"
        clearable
      ></el-input>
      
      <el-button type="primary" icon="el-icon-plus" @click="handleAddField">新增字段</el-button>
      <el-button icon="el-icon-download">导出</el-button>
    </div>

    <!-- 字段表格 -->
    <div class="table-container">
      <el-table
        :data="tableData"
        stripe
        style="width: 100%"
        height="calc(100vh - 200px)"
        v-loading="loading"
      >
        <el-table-column
          prop="fieldType"
          label="字段类型"
          width="120"
        >
          <template slot-scope="scope">
            <el-select v-model="scope.row.fieldType" placeholder="请选择" size="mini">
              <el-option label="日期" value="日期"></el-option>
              <el-option label="数字" value="数字"></el-option>
              <el-option label="文本" value="文本"></el-option>
            </el-select>
          </template>
        </el-table-column>
        
        <el-table-column
          prop="alias"
          label="别名"
          width="120"
        >
          <template slot-scope="scope">
            <el-input v-model="scope.row.alias" size="mini"></el-input>
          </template>
        </el-table-column>
        
        <el-table-column
          prop="originalFieldId"
          label="原始字段ID"
          width="150"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.originalFieldId }}</span>
          </template>
        </el-table-column>
        
        <el-table-column
          prop="fieldDescription"
          label="字段描述"
          width="150"
        >
          <template slot-scope="scope">
            <el-input v-model="scope.row.fieldDescription" size="mini" placeholder="(空)"></el-input>
          </template>
        </el-table-column>
        
        <el-table-column
          prop="originalFieldDescription"
          label="原始字段描述"
          width="150"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.originalFieldDescription }}</span>
          </template>
        </el-table-column>
        
        <el-table-column
          prop="dataExample"
          label="数据示例"
          width="150"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.dataExample }}</span>
          </template>
        </el-table-column>
        
        <el-table-column
          prop="displayFormat"
          label="展示格式"
          width="150"
        >
          <template slot-scope="scope">
            <el-select v-model="scope.row.displayFormat" size="mini">
              <el-option label="1970/01/01" value="1970/01/01"></el-option>
              <el-option label="123456.12" value="123456.12"></el-option>
              <el-option label="数据示例" value="数据示例"></el-option>
            </el-select>
          </template>
        </el-table-column>
        
        <el-table-column
          prop="nullValue"
          label="NULL值"
          width="120"
        >
          <template slot-scope="scope">
            <el-select v-model="scope.row.nullValue" size="mini">
              <el-option label="不替换" value="不替换"></el-option>
              <el-option label="替换为空" value="替换为空"></el-option>
              <el-option label="替换为0" value="替换为0"></el-option>
            </el-select>
          </template>
        </el-table-column>
        
        <el-table-column
          prop="group"
          label="分组"
          width="100"
        >
          <template slot-scope="scope">
            <el-select v-model="scope.row.group" size="mini">
              <el-option label="-" value="-"></el-option>
              <el-option label="分组1" value="分组1"></el-option>
              <el-option label="分组2" value="分组2"></el-option>
            </el-select>
          </template>
        </el-table-column>
        
        <el-table-column
          prop="display"
          label="显示"
          width="80"
        >
          <template slot-scope="scope">
            <el-checkbox v-model="scope.row.display"></el-checkbox>
          </template>
        </el-table-column>
        
        <el-table-column
          label="操作"
          width="128"
          fixed="right"
        >
          <template slot-scope="scope">
            <el-button type="text" size="mini" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button type="text" size="mini" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页 -->
    <div class="pagination-container">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: 'FieldManagement',
  data() {
    return {
      activeTab: 'field', // 默认激活字段管理标签
      searchKeyword: '', // 搜索关键词
      loading: false, // 表格加载状态
      currentPage: 1, // 当前页码
      pageSize: 10, // 每页显示数量
      total: 100, // 总条目数
      tableData: [
        {
          fieldType: '日期',
          alias: '时间',
          originalFieldId: 'real_date_3365',
          fieldDescription: '',
          originalFieldDescription: '',
          dataExample: '',
          displayFormat: '1970/01/01',
          nullValue: '不替换',
          group: '-',
          display: true
        },
        {
          fieldType: '数字',
          alias: 'one',
          originalFieldId: 'c0_3365',
          fieldDescription: '',
          originalFieldDescription: '',
          dataExample: '',
          displayFormat: '123456.12',
          nullValue: '不替换',
          group: '-',
          display: true
        },
        {
          fieldType: '数字',
          alias: 'id',
          originalFieldId: 'id_3354',
          fieldDescription: '',
          originalFieldDescription: '',
          dataExample: '',
          displayFormat: '123456.12',
          nullValue: '不替换',
          group: '-',
          display: true
        },
        {
          fieldType: '文本',
          alias: 'issue_id',
          originalFieldId: 'issue_id_3354',
          fieldDescription: '',
          originalFieldDescription: '',
          dataExample: '',
          displayFormat: '123456.12',
          nullValue: '不替换',
          group: '-',
          display: true
        },
        {
          fieldType: '日期',
          alias: 'created_at',
          originalFieldId: 'created_at_3354',
          fieldDescription: '',
          originalFieldDescription: '',
          dataExample: '',
          displayFormat: '1970/01/01',
          nullValue: '不替换',
          group: '-',
          display: true
        },
        {
          fieldType: '日期',
          alias: 'updated_at',
          originalFieldId: 'updated_at_3354',
          fieldDescription: '',
          originalFieldDescription: '',
          dataExample: '',
          displayFormat: '1970/01/01',
          nullValue: '不替换',
          group: '-',
          display: true
        },
        {
          fieldType: '文本',
          alias: 'closed_at',
          originalFieldId: 'closed_at_3354',
          fieldDescription: '',
          originalFieldDescription: '',
          dataExample: '',
          displayFormat: '1970/01/01',
          nullValue: '不替换',
          group: '-',
          display: true
        },
        {
          fieldType: '文本',
          alias: 'milestone',
          originalFieldId: 'milestone_3354',
          fieldDescription: '',
          originalFieldDescription: '',
          dataExample: '',
          displayFormat: '数据示例',
          nullValue: '不替换',
          group: '-',
          display: true
        },
        {
          fieldType: '日期',
          alias: 'milestone_start',
          originalFieldId: 'milestone_start_',
          fieldDescription: '',
          originalFieldDescription: '',
          dataExample: '',
          displayFormat: '1970/01/01',
          nullValue: '不替换',
          group: '-',
          display: true
        },
        {
          fieldType: '日期',
          alias: 'milestone_duo',
          originalFieldId: 'milestone_duo_',
          fieldDescription: '',
          originalFieldDescription: '',
          dataExample: '',
          displayFormat: '1970/01/01',
          nullValue: '不替换',
          group: '-',
          display: true
        }
      ]
    };
  },
  methods: {
    handleAddField() {
      this.$message.info('新增字段功能');
    },
    handleEdit(row) {
      this.$message.info(`编辑字段: ${row.alias}`);
    },
    handleDelete(row) {
      this.$confirm(`确定要删除字段"${row.alias}"吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message.success('删除成功');
      }).catch(() => {
        this.$message.info('已取消删除');
      });
    },
    handleSizeChange(size) {
      this.pageSize = size;
      this.fetchTableData();
    },
    handleCurrentChange(page) {
      this.currentPage = page;
      this.fetchTableData();
    },
    fetchTableData() {
      // 模拟数据获取
      this.loading = true;
      setTimeout(() => {
        this.loading = false;
      }, 500);
    }
  }
};
</script>

<style lang="less" scoped>
.field-management-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 20px;
  box-sizing: border-box;
  overflow: hidden;
  background-color: #f5f7fa;

  .tabs-header {
    background-color: #fff;
    padding: 0 20px;
    border-radius: 4px 4px 0 0;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    
    /deep/ .el-tabs__header {
      margin: 0;
    }
  }

  .search-operation-bar {
    display: flex;
    align-items: center;
    padding: 15px 20px;
    background-color: #fff;
    margin-top: 1px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);

    .search-input {
      width: 300px;
      margin-right: 15px;
    }
  }

  .table-container {
    flex: 1;
    margin-top: 1px;
    background-color: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    overflow: hidden;

    /deep/ .el-table {
      .el-table__header-wrapper {
        th {
          background-color: #fafafa;
          color: #333;
          font-weight: bold;
        }
      }

      .el-table__body-wrapper {
        .el-select, .el-input {
          width: 100%;
        }
      }
    }
  }

  .pagination-container {
    padding: 15px 20px;
    background-color: #fff;
    margin-top: 1px;
    border-radius: 0 0 4px 4px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: flex-end;
  }
}

// 响应式调整
@media (max-width: 768px) {
  .field-management-container {
    padding: 10px;
    
    .search-operation-bar {
      flex-direction: column;
      align-items: flex-start;
      
      .search-input {
        width: 100%;
        margin-right: 0;
        margin-bottom: 10px;
      }
    }
  }
}
</style>